<template>
  <div id="FaultDispatch">
    <!--查询表单-->
    <el-form label-position="right" size="small" :inline="true" :model="queryForm" label-width='90px' class="query-form">
      <el-form-item label="姓名">
        <el-input v-model="queryForm.xm" clearable placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="getData(1)">查询</el-button>
      <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="dialogAddVisible = true">领取材料</el-button>
          <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="htcldialogAddVisible = true">回退材料</el-button>
              <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="shcldialogAddVisible = true">损坏材料</el-button>
      <el-button type="primary" icon="iconfont icon--daochu" size="mini" @click="export2Excel">导出</el-button>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData" border style="width: 100%;"
        @sort-change="sortChange" v-loading="loading" :header-cell-style="{padding: 0,height: '34px'}"
      >
      <!-- <el-table-column prop="khxm" label="订单号" sortable="custom" :show-overflow-tooltip="true"></el-table-column> -->
      <el-table-column prop="xm" sortable="custom" label="姓名"  width="120"></el-table-column>
      <el-table-column prop="lgm"  sortable label="领用光猫"  width="120"></el-table-column>
      <el-table-column prop="lfgq" sortable="custom" label="领用分光器"  width="120"></el-table-column>
      <el-table-column prop="ljdh" sortable="custom" label="领用机顶盒" width="120">
        <!-- <template slot-scope="scope">
          <p><span>{{scope.row.gswg}}</span><span v-if="scope.row.zwsfCname">({{scope.row.zwsfCname}})</span></p>
        </template>  -->
      </el-table-column>
      <el-table-column prop="lpx" sortable="custom" label="领用皮线" :show-overflow-tooltip="true"  width="120"></el-table-column>
      <el-table-column prop="lwq" sortable="custom" label="领用尾纤" :show-overflow-tooltip="true"  width="120"></el-table-column>
      <el-table-column prop="agm" sortable="custom" label="安装光猫" width="120"></el-table-column >
      <el-table-column prop="afgq" sortable="custom" label="安装分光器"  width="120">
        <!-- <template slot-scope="scope">
          <p v-if="scope.row.fromWhere == '微信'"><i style="font-size: 20px;color: #69db5b;" class="iconfont icon-weixin"></i></p>
        </template> -->
      </el-table-column>
      <el-table-column prop="ajdh" sortable="custom" label="安装机顶盒"  width="120" :show-overflow-tooltip="true">
      
      </el-table-column>
          <el-table-column prop="apx" sortable="custom" label="使用皮线" :show-overflow-tooltip="true"  width="120"></el-table-column>
      <el-table-column prop="awq" sortable="custom" label="使用尾纤" :show-overflow-tooltip="true"  width="120"></el-table-column>
          <el-table-column prop="tgm" sortable="custom" label="回退光猫" :show-overflow-tooltip="true"  width="120"></el-table-column>
      <el-table-column prop="tfgq" sortable="custom" label="回退分光器" :show-overflow-tooltip="true"  width="120"></el-table-column>
          <el-table-column prop="tjdh" sortable="custom" label="回退机顶盒" :show-overflow-tooltip="true"  width="120"></el-table-column>
      <el-table-column prop="sgm" sortable="custom" label="损坏光猫" :show-overflow-tooltip="true"  width="120"></el-table-column>
          <el-table-column prop="sfgq" sortable="custom" label="损坏分光器" :show-overflow-tooltip="true"  width="120"></el-table-column>
      <el-table-column prop="sjdh" sortable="custom" label="损坏机顶盒" :show-overflow-tooltip="true" width="120"></el-table-column>
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
                   :page-size="pageSize"
                   @current-change="getData"
                   :current-page="currentPage"
                   :total="count" style="float: right;">
    </el-pagination>

    <!--领取材料-->
    <el-dialog title="领取材料" width="900px" @close="closeAdd" class="dialog dialogAdd"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="laddForm" style="margin-right: 20px;" :inline="true" :model="laddForm" :rules="addFormRules" label-position="right" label-width="100px" size="small">
        <el-form-item label="姓名" prop="xm">
          <el-input v-model="laddForm.xm"></el-input>
        </el-form-item>
           <el-form-item label="所属镇区"  prop="sszq">
                    <el-select v-model="laddForm.sszq" clearable placeholder="请选择">
                      <el-option v-for="item in zqList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
        <el-form-item label="手机号码" prop="sjhm">
          <el-input v-model="laddForm.sjhm"></el-input>
        </el-form-item>
       
     <el-form-item label="领取时间" prop="sj">
         
                 <el-date-picker v-model="laddForm.sj" value-format="yyyy-MM-dd " format="yyyy-MM-dd "
            type="date" placeholder="请选择领取时间">
          </el-date-picker>
        </el-form-item>

         <el-form-item label="设备名称"  prop="sbmc" >
                    <el-select v-model="laddForm.sbmc" clearable placeholder="请选择">
                      <el-option v-for="item in lqyList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
        <el-form-item label="设备数量" prop="sbsl">
          <el-input   placeholder="设备数量" v-model="laddForm.sbsl">
          </el-input>
        </el-form-item>
        <el-form-item label="设备编号" prop="sbbh">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="设备编号" resize="none" v-model="laddForm.sbbh">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入备注" resize="none" v-model="laddForm.bz">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="ladd">确 定</el-button>
      </div>
    </el-dialog>
      <!--回退材料-->
         <el-dialog title="回退材料" width="900px" @open="openAddhtcl" @close="closeAddhtcl" class="dialog dialogAdd"
               :visible.sync="htcldialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="haddForm" style="margin-right: 20px;" :inline="true" :model="haddForm" :rules="haddFormRules" label-position="right" label-width="100px" size="small">
        <el-form-item label="姓名" prop="xm">
          <el-input v-model="haddForm.xm"></el-input>
        </el-form-item>
           <el-form-item label="所属镇区"  prop="sszq">
                    <el-select v-model="haddForm.sszq" clearable placeholder="请选择">
                      <el-option v-for="item in zqList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
        <el-form-item label="手机号码" prop="sjhm">
          <el-input v-model="haddForm.sjhm"></el-input>
        </el-form-item>
       
         <el-form-item label="回退时间" prop="sj">
          <!-- <el-date-picker v-model="addForm.cgsj" 
            type="date" placeholder="选择采购时间">
          </el-date-picker> -->
                 <el-date-picker v-model="haddForm.sj" value-format="yyyy-MM-dd " format="yyyy-MM-dd "
            type="date" placeholder="请选择回退时间">
          </el-date-picker>
        </el-form-item>
  <el-form-item label="设备名称" prop="sbmc">
                    <el-select  v-model="haddForm.sbmc"  clearable placeholder="请选择">
                      <el-option v-for="item in hqyList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>

                   <el-form-item label="设备数量" prop="sbsl">
          <el-input type="textarea"  placeholder="设备数量" resize="none" v-model="haddForm.sbsl">
          </el-input>
        </el-form-item>
 <el-form-item label="设备编号" prop="sbbh">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="设备编号" resize="none" v-model="haddForm.sbbh">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入备注" resize="none" v-model="haddForm.bz">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="htcldialogAddVisible = false">取 消</el-button>
       <el-button type="primary" @click="hadd">确 定</el-button>
      </div>
    </el-dialog>
      <!--损坏材料-->
         <el-dialog title="损坏材料" width="900px" @open="openAddshcl" @close="closeAddshcl" class="dialog dialogAdd"
               :visible.sync="shcldialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="saddForm" style="margin-right: 20px;" :inline="true" :model="saddForm" :rules="saddFormRules" label-position="right" label-width="100px" size="small">
        <el-form-item label="姓名" prop="xm">
          <el-input v-model="saddForm.xm"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="sjhm">
          <el-input v-model="saddForm.sjhm"></el-input>
        </el-form-item>
          <el-form-item label="所属镇区"  prop="sszq">
                    <el-select v-model="saddForm.sszq" clearable placeholder="请选择">
                      <el-option v-for="item in zqList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
         <!-- <el-form-item label="时间" prop="sj">
          <el-date-picker v-model="saddForm.sj" 
            type="date" placeholder="选择报备时间">
          </el-date-picker>
        </el-form-item> -->
         <el-form-item label="报备时间" prop="sj">
          <!-- <el-date-picker v-model="addForm.cgsj" 
            type="date" placeholder="选择采购时间">
          </el-date-picker> -->
                 <el-date-picker v-model="saddForm.sj" value-format="yyyy-MM-dd " format="yyyy-MM-dd "
            type="date" placeholder="请选择报备时间">
          </el-date-picker>
        </el-form-item>
  <el-form-item label="设备名称" prop="sbmc">
                    <el-select v-model="saddForm.sbmc"  clearable placeholder="请选择">
                      <el-option v-for="item in sqyList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>

                  <el-form-item label="设备数量" prop="sbsl">
          <el-input type="textarea" placeholder="请输入设备数量" resize="none" v-model="saddForm.sbsl">
          </el-input>
        </el-form-item>
 <el-form-item label="设备编号" prop="sbbh">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="设备编号" resize="none" v-model="saddForm.sbbh">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入备注" resize="none" v-model="saddForm.bz">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        
        <el-button @click="shcldialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="sadd">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer/src/component.vue"
export default {
  name: 'Azd',
  components: {
    Viewer
  },
  data () {
    return {
      lqyList:["光猫","分光器","机顶盒","皮线","尾纤"],//材料设备
       hqyList:["光猫","分光器","机顶盒"],
        sqyList:["光猫","分光器","机顶盒"],
     zqList:["虎门","厚街","北区","资源政治部","工程部"],//所属镇区
      queryForm: {},    //  查询条件
      prop: 'createTime', //  排序属性
      order: -1,    //  排序 升序、降序
      bzfsList: ['客户拨打本地热线3530000','客户拨打渠道服务电话','客户微信报障','客户拨打装维人员电话'],    // 报障方式
      gzlxList: ['LOS红灯','ONU不通电，确认已开电源','PON灯闪','经常掉线','其他','上网慢','网络不稳定经常断线，网速时快时慢','网络电视，机顶盒不懂操作',
        '网络电视，无法播放','网络电视，无法点播','网络电视，无法直播', '网络电视，遥控器问题', '续费后无法上网', '指示灯正常，但无法上网'],  //  故障类型
      tableData: [],    //  当前页数据
      loading: false,
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
    /************************领取材料********************* */
      laddForm: {
        xm: '',             // 姓名
        sszq: '',            //所属镇区
        sjhm: '',            //手机号码
        sj: '',              //时间
        sbmc: '',           //设备名称
        sbsl:'',             //设备数量
        sbbh:'',           //设备编号
        bz: '',              //备注
      },               
        //新增校验规则
      addFormRules:{
          xm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          sszq: [{ required: true, validator: this.isNull, trigger: 'change' }],
          sjhm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          sj: [{ required: true, validator: this.isNull, trigger: 'change' }],
          sbmc: [{ required: true, validator: this.isNull, trigger: 'change' }],
          // sbbh: [{ required: true, validator: this.isArrayNull, trigger: 'blur' }],
              sbsl: [{ required: true, validator: this.isNull, trigger: 'blur' }]
      },
      dialogAddVisible: false,    //  新增模态框
      options: [],
 
   
       /************************回退材料********************* */
         htcldialogAddVisible: false,   //  新增模态框
         haddForm: {
        xm:'',             // 姓名
        sszq:'',            //所属镇区
        sjhm:'',            //手机号码
        sj:'',              //时间
        sbmc:'',           //设备名称
        sbbh:'',           //设备编号
         sbsl:'',             //设备数量
        bz:'',              //备注
      },
      //回退材料验证规则
       haddFormRules:{
          xm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          sszq: [{ required: true, validator: this.isNull, trigger: 'change' }],
          sjhm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          sj: [{ required: true, validator: this.isNull, trigger: 'change' }],
          sbmc: [{ required: true, validator: this.isNull, trigger: 'change' }],
          // sbbh: [{ required: true, validator: this.isArrayNull, trigger: 'blur' }],
            sbsl: [{ required: true, validator: this.isNull, trigger: 'blur' }]
      },
       /************************损坏材料********************* */
         shcldialogAddVisible: false,   //  新增模态框
              saddForm: {
        xm:'',             // 姓名
        sszq:'',            //所属镇区
        sjhm:'',            //手机号码
        sj:'',              //时间
        sbmc:'',           //设备名称
        sbbh:'',           //设备编号
        sbsl:'',             //设备数量
        bz:'',              //备注
      },
      //损坏材料验证规则
     saddFormRules:{
          xm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          sszq: [{ required: true, validator: this.isNull, trigger: 'change' }],
          sjhm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          sj: [{ required: true, validator: this.isNull, trigger: 'change' }],
          sbmc: [{ required: true, validator: this.isNull, trigger: 'change' }],
          // sbbh: [{ required: true, validator: this.isArrayNull, trigger: 'blur' }],
            sbsl: [{ required: true, validator: this.isNull, trigger: 'blur' }]
      },
    }
  },
  mounted(){
    this.getData(1)
    // this.getWg()
  },

  methods: {
    getData(val){
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.startLoading()
      this.$post("/api/ClInforController/getList",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;     
        this.loading = false;
     // alert(this.data.list.length)
      })
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },
  /***********************导出******************* */
    formatJson(filterVal, jsonData) {
　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
    export2Excel() {
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = 1
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.$post("/api/ClInforController/getList",params, (data) => {
        let tableData = data.list;
        require.ensure([], () => {
  　　　　const { export_json_to_excel } = require('../vendor/Export2Excel');
  　　　　const tHeader = ['姓名','领用光猫','领用分光器','领用机顶盒','领用皮线','领用尾纤', '安装光猫', '安装分光器','安装机顶盒','使用皮线','使用尾纤','回退光猫','回退分光器','回退机顶盒','损坏光猫','损坏分光器','损坏机顶盒'];
  　　　　const filterVal = ['xm', 'lgm', 'lfgq', 'ljdh', 'lpx', 'lwq', 'agm', 'afgq','ajdh', 'apx', 'awq','tgm', 'tfgq', 'tjdh', 'sgm','sfgq', 'sjdh'];
  　　　　const data = this.formatJson(filterVal, tableData);
  　　　　export_json_to_excel(tHeader, data, '材料信息');
  　　　})
      })
　  },
  /******************新增***************** */
    
    // 打开新增模态框
    openAdd(){
      // this.addForm.pdsj = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    },
    // 关闭新增模态框
    closeAdd(){
      this.$refs.laddForm.resetFields()    //重置模态框
    },
    // 确定新增
    ladd(){
      this.$refs.laddForm.validate((valid) => {
        if (valid) {
          let addForm = this.deepClone(this.laddForm)
          // console.log(laddForm)
          // if(addForm.gswg && addForm.gswg.length){
          //   addForm.qy = addForm.gswg[0]
          //   addForm.gswg = addForm.gswg[1]
          // }else{
          //   addForm.qy = ''
          //   addForm.gswg = ''
          // }
          // if(addForm.zwsfId){
          //   addForm.zwsfCname = addForm.zwsfId.split('/')[1]
          //   addForm.zwsfId = addForm.zwsfId.split('/')[0]
          // }
          this.startLoading()
          this.$post("/api/ClInforController/addOne", addForm, (data) => {
            this.$message.success("添加成功！")
            this.dialogAddVisible = false
            this.getData(1)
          })
        }
      })
    },
   /*****************回退材料***************/
  // 打开新增模态框
    openAddhtcl(){
     /* this.addForm.pdsj = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')*/
    },
    // 关闭新增模态框
    closeAddhtcl(){
      this.$refs.haddForm.resetFields()             //重置模态框
    },
        // 确定回退
    hadd(){
      this.$refs.haddForm.validate((valid) => {
        if (valid) {
          let addForm = this.deepClone(this.haddForm)
          // console.log(addForm)
          // if(addForm.gswg && addForm.gswg.length){
          //   addForm.qy = addForm.gswg[0]
          //   addForm.gswg = addForm.gswg[1]
          // }else{
          //   addForm.qy = ''
          //   addForm.gswg = ''
          // }
          // if(addForm.zwsfId){
          //   addForm.zwsfCname = addForm.zwsfId.split('/')[1]
          //   addForm.zwsfId = addForm.zwsfId.split('/')[0]
          // }
          this.startLoading()
          this.$post("/api/ClInforController/backOne", addForm, (data) => {
            this.$message.success("添加成功！")
            this.htcldialogAddVisible = false
            this.getData(1)
          })
        }
      })
    },
  /*****************损坏材料***************/
 openAddshcl(){
     /* this.addForm.pdsj = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')*/
    },
    // 关闭新增模态框
    closeAddshcl(){
      this.$refs.saddForm.resetFields()
    },
//确定损坏
  
    sadd(){
      this.$refs.saddForm.validate((valid) => {
        if (valid) {
          let addForm = this.deepClone(this.saddForm)
          // console.log(addForm)
          // if(addForm.gswg && addForm.gswg.length){
          //   addForm.qy = addForm.gswg[0]
          //   addForm.gswg = addForm.gswg[1]
          // }else{
          //   addForm.qy = ''
          //   addForm.gswg = ''
          // }
          // if(addForm.zwsfId){
          //   addForm.zwsfCname = addForm.zwsfId.split('/')[1]
          //   addForm.zwsfId = addForm.zwsfId.split('/')[0]
          // }
          this.startLoading()
          this.$post("/api/ClInforController/damageOne", addForm, (data) => {
            this.$message.success("添加成功！")
            this.shcldialogAddVisible = false
            this.getData(1)
          })
        }
      })
    }

  
   }
 }
</script>

<style lang="less" scoped>
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 300px;
    }
  }

  .label-box{
    display: flex;
    margin-bottom: 5px;
    .label-text{
      width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .label-value{
      flex: 1;
    }
  }
</style>
<style lang="less">
    .long-form .el-form-item__label{
      line-height: 16px;
    }
</style>

